<template>
	<view class="login d_f f_d_c a_i_c">
		<view class="header d_f j_c_s_b a_i_c">
			<image src="../../static/ct_0031_返回键.png" mode="" class="back" @tap="back"></image>
			<image src="../../static/ct_0033_logo小.png" mode="" class="small_logo"></image>

		</view>
		<view class="create">Create my OPAI wallet</view>
		<view class="title">Set wallet name(BTC)</view>
		<view class="input">
			<u-input v-model="form.wallet_name" :border="false" placeholder="" />
		</view>
		<view class="title">Set password</view>
		<view class="input">
			<u-input v-model="form.wallet_password" type="password" :border="false" placeholder="" />
		</view>
		<view class="title">confirm password</view>
		<view class="input">
			<u-input v-model="form.wallet_password_confirm" type="password" :border="false" placeholder="" />
		</view>
		<view class="title">Prompt information</view>
		<view class="input">
			<u-input v-model="form.wallet_prompt" :border="false" placeholder="" />
		</view>
		<!-- <view class="d_f agree_top">
			<u-checkbox-group>
				<u-checkbox shape="circle" v-model="checked" size="28" active-color="#00ffcc"></u-checkbox>
			</u-checkbox-group>
			<view class="d_f agree">
				I have read it carefully and agree
				<view class="size" @tap="protocol">《User Agreement》</view>
			</view>
		</view> -->
		<view class="button d_f j_c_c a_i_c" @tap="continueUp">Continue</view>
		<u-popup v-model="show" mode="center" border-radius="8">
			<view class="dialog">
				<view>Hello, l am Smith, a technical engineer from OPAlWelcome to participate in OPAl's AlTQ
					testingproject.In order to facilitate Al operation of you!testing, we will provide you with a
					centralizedwallet.Please agree to the agreement below andclick OK to claim it.</view>
				<view class="d_f agree_top">
					<u-checkbox-group>
						<u-checkbox shape="circle" v-model="checked1" size="28" active-color="#65ba90"></u-checkbox>
					</u-checkbox-group>
					<view class="d_f agree">
						I have read it carefully and agree
						<view class="size" @tap="protocol">《Agreement》</view>
					</view>
				</view>
				<view class="d_f j_c_c a_i_c btn" @tap="submit">OK</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				checked: false,
				checked1:false,
				data: {},
				form: {
					wallet_name: '',
					wallet_password: '',
					wallet_password_confirm: '',
					wallet_prompt: '',
				}
			}
		},
		components: {

		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			//提交注册信息
			continueUp() {
		
				if (!this.form.wallet_name) {
					this.tips('Please Set wallet name')
					return
				}
				if (!this.form.wallet_password) {
					this.tips('Please set password')
					return
				}
				if (!this.form.wallet_password_confirm) {
					this.tips('Please enter a confirmation password')
					return
				}
				// if (this.form.wallet_password_confirm != this.form.wallet_password) {
				// 	this.tips('Password inconsistency')
				// 	return
				// }
				this.show = true
			
			},
			submit(){
				if (!this.checked1) {
					this.tips('Please read and agree to the user agreement')
					return
				}
				this.$api.registerwallet(this.form).then(res => {
					this.data.is_wallet = 1
					uni.setStorageSync('data', this.data)
					uni.redirectTo({
						url:'/pages/index/myWallet'
					})
				
				})
				
			},
			tips(title) {
				uni.showToast({
					title: title,
					icon: 'none',
					duration: 3000
				});
			},
			//跳转到协议
			protocol() {
				uni.navigateTo({
					url: '/pages/index/agreeOn?type=4&name=agreeOn'
				})
			}
		},
		onShow() {

		},
		onLoad(options) {
			this.data = uni.getStorageSync('data')
		},
		watch: {

		},
		computed: {

		}
	}
</script>

<style scoped lang='scss'>
	.login {
		width: 100%;
		height: 100%;
		background-image: url('../../static/ct_0011_背景.png');
		background-size: 100% 100%;

		.header {
			width: calc(100% - 64rpx);
			height: 160rpx;
			margin-left: 32rpx;

			.small_logo {
				width: 133rpx;
				height: 42rpx;
			}

			.back {
				width: 20rpx;
				height: 32rpx;
				transform: rotate(180deg);
			}
		}

		.create {
			margin-top: 50rpx;
			width: 686rpx;
			color: #fff;
			font-weight: 700;
			font-size: 40rpx;
		}

		.title {
			color: #fff;
			font-size: 28rpx;
			margin-top: 32rpx;
			width: 600rpx;
		}

		.input {
			width: 686rpx;
			border-radius: 40rpx;
			border: 1rpx solid rgb(65, 103, 103);
			height: 80rpx;
			margin-top: 32rpx;
			padding: 0rpx 32rpx;

			/deep/.u-input--border {
				border: none !important;
			}

			/deep/.uni-input-input {
				color: #fff !important;
			}
		}

		.button {
			width: 640rpx;
			border-radius: 40rpx;
			background: #fff;
			color: #3c9469;
			height: 100rpx;
			margin-top: 40rpx;
			font-weight: 700;
		}

		.log {
			margin-top: 64rpx;
			color: #fff;
			font-weight: 700;
			font-size: 36rpx;
		}

		.must {
			color: #81c1a1;
			font-size: 20rpx;
		}

		.tips {
			margin-top: 32rpx;
			color: #fff;
			font-weight: 700;

			.sign {
				color: #00ffcc;
				margin-left: 10rpx;
			}
		}

		.agree_top {
			margin-top: 32rpx;

			.agree {
				font-size: 24rpx;

				.size {
					color: rgb(101,186,144);
				}
			}
		}

		.dialog {
			width: 700rpx;
			background: #fff;
			padding: 32rpx;
			border-radius: 8px;
		}
		.btn{
			width: 100%;
			border-radius: 20rpx;
			background: rgb(101,186,144);
			color: #FFFFFF;
			height: 80rpx;
			margin-top: 32rpx;
			font-weight: 700;
		}
	}
</style>